<template>
<div class="home" ref="home">
  <div class="contant" v-show="show[0]" @click="homeClick">
    <img :src="g1" class="img" />
  </div>
  <div class="contant" v-show="show[1]">
    <div class="img">
      <img :src="g2" width="100%" height="100%" />
      <div @click="$emit('setPage',2)" class="p1" />
      <div @click="$emit('setPage',3)" class="p2" />
      <div @click="$emit('setPage',4)" class="p3" />
    </div>
  </div>
</div>
</template>

<script>
const RATE = window.screen.height/window.screen.width
import g1 from 'assets/1.gif'
import g2 from 'assets/2.gif'
import g1_pad from 'assets/ipad/1.gif'
import g2_pad from 'assets/ipad/2.gif'
export default {
  name: 'home',
  data() {
    return {
      show: [false, false],
      g1: RATE<1.5?`${g1_pad}?${Date.parse(new Date())}`:`${g1}?${Date.parse(new Date())}`,
      g2: RATE<1.5?`${g2_pad}?${Date.parse(new Date())}`:`${g2}?${Date.parse(new Date())}`,
      clickBtn:false
    }
  },
  created() {
    this.clickBtn = false
    this.$set(this.show, 0, true)
    let img = new Image()
    img.src = this.g1
    img.onload = () => {
      const setTime = setTimeout(() => {
        // this.$set(this.show, 0, false)
        // this.$set(this.show, 1, true)
        this.clickBtn = true
        clearTimeout(setTime)
      }, 7500);
    }
  },
  methods:{
    homeClick(){
      // if (!this.clickBtn) {
      //   return
      // }
      this.$set(this.show, 0, false);
      this.$set(this.show, 1, true)
    }
  }
}
</script>
<style lang="stylus">
@keyframes run {
  from{
    background-position: 0 0;
  }
  to{
    background-position: 0 100%;
  }
}
.btn
  display: block;
  height: calc(100vw*(35/640));
  width: calc(100vw*(83/640));
  background: url('~assets/btn.png') no-repeat;
  background-size: 100%;
  position: absolute;
  right: calc(100vw*(16/640) - 30px);
  top: -30px;
  z-index: 5000;
  border: 30px solid transparent;
  color:transparent;
.home
  position: relative;
  width: 100vw;
  height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  .contant
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
  .img
    display: block;
    width: 100vw;
    height: calc(100vw*(1235/640));
    position: relative;
    top: 50vh;
    margin-top: calc(-50vw*(1235/640));
  .p1
    width: 100vw;
    height: calc(100vw*(200/640));
    top: calc(100%*(200/1235));
    left: 0;
    display: block;
    position: absolute;
  .p2
    width: 100vw;
    height: calc(100vw*(200/640));
    top: calc(100%*(490/1235));
    left: 0;
    display: block;
    position: absolute;
  .p3
    width: 100vw;
    height: calc(100vw*(200/640));
    top: calc(100%*(840/1235));
    left: 0;
    display: block;
    position: absolute;

@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  .home
    height: 100%
    .contant
      height: 100%
      .img
        height: 100%;
        top: -50%;
        transform: translateY(50%);
        margin-top: 0;
  .btn
    display: block;
    position: absolute;
    top: calc(100%*(9/800) - 30px);
</style>
